<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志查询测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        .btn { padding: 8px 16px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-primary { background-color: #007bff; color: white; }
        .btn-success { background-color: #28a745; color: white; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .status-200 { color: green; }
        .status-404 { color: orange; }
        .status-500 { color: red; }
        #result { margin-top: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>日志查询测试</h1>
        
        <div>
            <button class="btn btn-primary" onclick="login()">登录</button>
            <button class="btn btn-success" onclick="loadLogs()" disabled id="loadLogsBtn">加载日志</button>
        </div>
        
        <div id="result"></div>
        
        <table id="logsTable" style="display: none;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户ID</th>
                    <th>端点</th>
                    <th>方法</th>
                    <th>状态码</th>
                    <th>响应时间</th>
                    <th>IP地址</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody id="logsTableBody"></tbody>
        </table>
    </div>

    <script>
        let token = null;
        
        async function login() {
            try {
                const response = await fetch('http://localhost:8001/api/v1/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin123'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    token = data.access_token;
                    document.getElementById('loadLogsBtn').disabled = false;
                    document.getElementById('result').innerHTML = '<div style="color: green;">登录成功！</div>';
                } else {
                    document.getElementById('result').innerHTML = '<div style="color: red;">登录失败</div>';
                }
            } catch (error) {
                document.getElementById('result').innerHTML = `<div style="color: red;">登录错误: ${error.message}</div>`;
            }
        }
        
        async function loadLogs() {
            if (!token) {
                document.getElementById('result').innerHTML = '<div style="color: red;">请先登录</div>';
                return;
            }
            
            try {
                const response = await fetch('http://localhost:8001/api/v1/admin/logs', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    document.getElementById('result').innerHTML = `<div style="color: green;">成功加载 ${data.total} 条日志记录</div>`;
                    displayLogs(data.items);
                } else {
                    document.getElementById('result').innerHTML = '<div style="color: red;">加载日志失败</div>';
                }
            } catch (error) {
                document.getElementById('result').innerHTML = `<div style="color: red;">加载日志错误: ${error.message}</div>`;
            }
        }
        
        function displayLogs(logs) {
            const tbody = document.getElementById('logsTableBody');
            tbody.innerHTML = '';
            
            logs.forEach(log => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${log.id}</td>
                    <td>${log.user_id || '-'}</td>
                    <td>${log.endpoint}</td>
                    <td>${log.method}</td>
                    <td class="status-${log.status_code}">${log.status_code}</td>
                    <td>${log.response_time}s</td>
                    <td>${log.ip_address}</td>
                    <td>${new Date(log.created_at).toLocaleString()}</td>
                `;
                tbody.appendChild(row);
            });
            
            document.getElementById('logsTable').style.display = 'table';
        }
    </script>
</body>
</html>